@-webkit-keyframes stompIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1);
            box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
}
  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
            box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
  }

  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); 
            box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); 
  }

  29% {
    -webkit-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); 
            box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); 
  }

  100% {
    -webkit-box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
            box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
  }
}
@keyframes stompIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); }

  20% {
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); }

  25% {
    opacity: 1;
    transform: translateY(0px);
    box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); }

  29% {
    box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); }

  100% {
    box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
  } 

}
@-webkit-keyframes stompOut {
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1);
            box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
}
  80% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
            box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); 
  }

  75% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); 
            box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); 
  }

  71% {
    -webkit-box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); 
            box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); 
  }

  0% {
    -webkit-box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
            box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
  }
}

@keyframes stompOut {
  100% {
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); }

  80% {
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: -30px 40px 0px -30px rgba(0, 0, 0, 0.1), 0px 40px 0px -30px rgba(0, 0, 0, 0.1), 30px 40px 0px -30px rgba(0, 0, 0, 0.1); }

  75% {
    opacity: 1;
    transform: translateY(0px);
    box-shadow: -50px 60px 0px -30px rgba(0, 0, 0, 0.1), 0px 60px 0px -30px rgba(0, 0, 0, 0.1), 50px 60px 0px -30px rgba(0, 0, 0, 0.1); }

  71% {
    box-shadow: -70px 80px 70px -30px rgba(255, 255, 255, 0.5), 0px 80px 70px -30px rgba(255, 255, 255, 0.7), 70px 80px 70px -30px rgba(255, 255, 255, 0.6); }

  0% {
    box-shadow: -100px 90px 120px -10px rgba(0, 0, 0, 0.1), 0px 90px 120px -10px rgba(0, 0, 0, 0.1), 100px 90px 120px -10px rgba(0, 0, 0, 0.1); 
  } 

}
